<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设备详情</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1890ff',
secondary: '#52c41a'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<script src="https://map.qq.com/api/gljs?v=1.exp&key=VXBBZ-4FWRQ-P6H5D-2SLOG-P3RYQ-LHF2Q"></script>
<style>
body {
min-height: 1024px;
background-color: #f0f2f5;
}
.tab-active {
color: #1890ff;
border-bottom: 2px solid #1890ff;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.info-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
</style>
</head>
<body>
<div class="w-[1440px] mx-auto px-6 py-6">
<div class="bg-white rounded-lg shadow-sm p-6 mb-6">
<h1 class="text-2xl font-medium mb-6">设备详情</h1>
<div class="border-b">
<div class="flex space-x-8">
<button class="tab-active px-4 py-3 font-medium">设备概况</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">实时状态</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">工时统计</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">油量统计</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">行驶轨迹</button>
<button class="px-4 py-3 text-gray-600 hover:text-gray-900">设备日报</button>
</div>
</div>
<div id="deviceInfo" class="mt-6">
<div class="grid grid-cols-3 gap-6">
<div class="bg-gradient-to-br from-blue-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-truck text-primary text-xl mr-3"></i>
<span class="text-lg font-medium">基本信息</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">设备 ID：</span>
<span class="font-medium">DEV2023112501</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">设备名称：</span>
<span class="font-medium">挖掘机 XC60</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">品牌型号：</span>
<span class="font-medium">卡特彼勒 320D2</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">序列号：</span>
<span class="font-medium">SN20231125A001</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-signal text-secondary text-xl mr-3"></i>
<span class="text-lg font-medium">运行状态</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">设备状态：</span>
<span class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2"></i>
<span class="font-medium">正常运行中</span>
</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">运行时长：</span>
<span class="font-medium">328 小时</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">最后上线：</span>
<span class="font-medium">2023-11-25 15:30:00</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">设备地址：</span>
<span class="font-medium">广东省深圳市南山区科技园</span>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-purple-50 to-white p-6 rounded-lg shadow-sm">
<div class="flex items-center mb-4">
<i class="fas fa-cog text-purple-500 text-xl mr-3"></i>
<span class="text-lg font-medium">硬件配置</span>
</div>
<div class="space-y-4">
<div class="flex items-center">
<span class="text-gray-500 w-24">摄像头：</span>
<span class="font-medium">高清网络摄像头</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">GPS模块：</span>
<span class="font-medium">高精度定位系统</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">油量传感器：</span>
<span class="font-medium">数字式传感器</span>
</div>
<div class="flex items-center">
<span class="text-gray-500 w-24">电池容量：</span>
<span class="font-medium">24V/100Ah</span>
</div>
</div>
</div>
</div>
</div>
<div id="realTimeStatus" class="hidden mt-6">
<div class="relative">
<div id="map1" class="w-full h-[500px] rounded-lg"></div>
<div class="info-card absolute top-4 left-4 p-4 rounded-lg shadow-lg">
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center">
<i class="fas fa-circle text-green-500 mr-2"></i>
<span>正常运行中</span>
</div>
<div>
<span class="text-gray-500">当日工时：</span>
<span>6.5 小时</span>
</div>
<div>
<span class="text-gray-500">当前油量：</span>
<span>75%</span>
</div>
<div>
<span class="text-gray-500">电子围栏：</span>
<span class="text-green-500">正常</span>
</div>
</div>
</div>
</div>
</div>
<div id="workingHours" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="space-x-2">
<button class="px-4 py-2 bg-primary text-white rounded-button">日视图</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">月视图</button>
</div>
<div class="flex items-center space-x-4">
<input type="month" class="px-4 py-2 border rounded-button" value="2023-11">
</div>
</div>
<div id="workingHoursChart" class="w-full h-[400px]"></div>
</div>
<div id="fuelStats" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="space-x-2">
<button class="px-4 py-2 bg-primary text-white rounded-button">日</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">周</button>
<button class="px-4 py-2 bg-gray-100 text-gray-600 rounded-button">月</button>
</div>
<div class="flex items-center space-x-4">
<input type="month" class="px-4 py-2 border rounded-button" value="2023-11">
</div>
</div>
<div id="fuelStatsChart" class="w-full h-[400px]"></div>
</div>
<div id="trajectory" class="hidden mt-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-4">
<input type="datetime-local" class="px-4 py-2 border rounded-button" value="2023-11-25T00:00">
<span>至</span>
<input type="datetime-local" class="px-4 py-2 border rounded-button" value="2023-11-25T23:59">
<button class="px-4 py-2 bg-primary text-white rounded-button">查询</button>
</div>
</div>
<div id="map2" class="w-full h-[500px] rounded-lg"></div>
</div>
<div id="dailyReport" class="hidden mt-6">
<div class="overflow-x-auto">
<table class="min-w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">设备名称</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">项目部名称</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">工时</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">加油量</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">油耗</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">工作时间</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">平均油耗</th>
<th class="px-6 py-3 text-left text-sm font-medium text-gray-500">操作</th>
</tr>
</thead>
<tbody class="bg-white">
<tr class="border-b">
<td class="px-6 py-4 text-sm">挖掘机 XC60</td>
<td class="px-6 py-4 text-sm">深圳科技园项目部</td>
<td class="px-6 py-4 text-sm">8.5 小时</td>
<td class="px-6 py-4 text-sm">50L</td>
<td class="px-6 py-4 text-sm">45L</td>
<td class="px-6 py-4 text-sm">08:00-17:30</td>
<td class="px-6 py-4 text-sm">5.3L/h</td>
<td class="px-6 py-4 text-sm">
<button class="text-primary hover:text-primary-dark">详情</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex justify-between items-center mt-4">
<div class="text-sm text-gray-500">
共 100 条记录
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border rounded-button text-gray-600">上一页</button>
<button class="px-3 py-1 bg-primary text-white rounded-button">1</button>
<button class="px-3 py-1 border rounded-button text-gray-600">2</button>
<button class="px-3 py-1 border rounded-button text-gray-600">3</button>
<button class="px-3 py-1 border rounded-button text-gray-600">下一页</button>
</div>
</div>
</div>
</div>
</div>
<script>
// 切换Tab
const tabs = document.querySelectorAll('button');
const contents = ['deviceInfo', 'realTimeStatus', 'workingHours', 'fuelStats', 'trajectory', 'dailyReport'];
tabs.forEach((tab, index) => {
if(index < 6) {
tab.addEventListener('click', () => {
tabs.forEach(t => t.classList.remove('tab-active'));
tab.classList.add('tab-active');
contents.forEach(content => {
document.getElementById(content).classList.add('hidden');
});
document.getElementById(contents[index]).classList.remove('hidden');
if(index === 1) initMap1();
if(index === 4) initMap2();
if(index === 2) initWorkingHoursChart();
if(index === 3) initFuelStatsChart();
});
}
});
// 初始化地图1
function initMap1() {
const center = new TMap.LatLng(22.53332, 113.93041);
const map = new TMap.Map('map1', {
center: center,
zoom: 16,
viewMode: '2D'
});
new TMap.MultiMarker({
map: map,
styles: {
"marker": new TMap.MarkerStyle({
width: 25,
height: 35,
anchor: { x: 12.5, y: 35 },
src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker.png'
})
},
geometries: [{
"id": "1",
"styleId": "marker",
"position": center,
"properties": {
"title": "当前位置"
}
}]
});
}
// 初始化地图2
function initMap2() {
const center = new TMap.LatLng(22.53332, 113.93041);
const map = new TMap.Map('map2', {
center: center,
zoom: 16,
viewMode: '2D'
});
const path = [
new TMap.LatLng(22.53332, 113.93041),
new TMap.LatLng(22.53432, 113.93141),
new TMap.LatLng(22.53532, 113.93241),
new TMap.LatLng(22.53632, 113.93341)
];
new TMap.MultiPolyline({
map: map,
styles: {
'style_blue': new TMap.PolylineStyle({
color: '#1890ff',
width: 6,
lineCap: 'round'
})
},
geometries: [{
styleId: 'style_blue',
paths: [path]
}]
});
}
// 初始化工时统计图表
function initWorkingHoursChart() {
const chart = echarts.init(document.getElementById('workingHoursChart'));
const option = {
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['11-19', '11-20', '11-21', '11-22', '11-23', '11-24', '11-25']
},
yAxis: {
type: 'value',
name: '工作时长(小时)'
},
series: [{
data: [8.5, 7.8, 8.2, 8.7, 8.1, 7.9, 6.5],
type: 'bar',
itemStyle: {
color: '#1890ff'
}
}]
};
chart.setOption(option);
}
// 初始化油量统计图表
function initFuelStatsChart() {
const chart = echarts.init(document.getElementById('fuelStatsChart'));
const option = {
animation: false,
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
},
yAxis: {
type: 'value',
name: '油量(%)'
},
series: [{
data: [100, 95, 85, 75, 65, 55, 45],
type: 'line',
smooth: true,
itemStyle: {
color: '#1890ff'
}
}]
};
chart.setOption(option);
}
</script>
</body>
</html>
